<template>
  <div class="adress">
    <v-container><h3>交通指南</h3></v-container>
    <v-container fluid>
      <v-row dense>
        <v-col>
          <v-card class="mx-auto">
            <div id="container"></div>
          </v-card>
        </v-col>
      </v-row>
      <v-row dense>
        <v-col>
          <v-card class="mx-auto">
            <v-card-title>
              位于四川省成都市天府新区福州路东段88号
            </v-card-title>
            <v-card-subtitle>地铁 <v-icon>mdi-subway</v-icon></v-card-subtitle>
            <v-card-text>
              地铁乘1、6、18号线到西博城（D口)出站，或乘地铁1号线广州路（F口)出站。出站即到车展展馆入口处，十分方便。
            </v-card-text>
            <v-card-subtitle>公交<v-icon>mdi-bus-stop</v-icon></v-card-subtitle>
            <v-card-text>
              <p>T1路，T40路，T40路快线，T7路地铁西博城站。</p>
            </v-card-text>
            <v-card-subtitle
              >自驾<v-icon>mdi-map-marker-plus</v-icon></v-card-subtitle
            >
            <v-card-text>
              <p>请导航搜索"中国西部国际博览城"。</p>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
// ts环境下声明AMap存在
declare let AMap: any;
export default Vue.extend({
  name: "adress",
  data() {
    return {};
  },
  mounted() {
    // 加载地图，并设置中心点
    let map = new AMap.Map("container", {
      zoom: 12,
      center: [104.08384979629518, 30.418264595363446],
    });
    //添加图层到地图
    let trafficLayer = new AMap.TileLayer.Traffic({
      zIndex: 10,
    });
    map.add(trafficLayer);
    //  给当前文本添加标记和标记内容
    let marker = new AMap.Marker({
      position: map.getCenter(),
      anchor: "bottom-center",
      offset: new AMap.Pixel(0, 0),
    });
    marker.setMap(map);
    marker.setLabel({
      direction: "right",
      //设置文本标注偏移量
      offset: new AMap.Pixel(-80, -30),
      //设置文本标注内容
      content: "<div class='info'>中国西部国际博览城</div>",
    });
    // 为地图添加工具其他条
    AMap.plugin(
      ["AMap.ToolBar", "AMap.Scale", "AMap.OverView", "AMap.MapType"],
      function () {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());
        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        map.addControl(new AMap.OverView({ isOpen: false }));
        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType());
      }
    );
  },
});
</script>
 <style>
#container {
  height: 40vh;
  background-color: antiquewhite;
}

.amap-icon img {
  width: 25px;
  height: 34px;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.info {
  padding: 1vw;
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
  border: 0.5px solid rgba(0, 0, 0, 0.5);
  color: black;
  font-size: 16px;
}
.v-card__title {
  margin-bottom: 1vh;
}
.v-card__subtitle {
  margin-bottom: -2vh;
  font-size: 16px;
  color: black !important;
}
.v-card__text {
  margin-bottom: -3vh;
}
</style>